<template>
  <div class="container">
    <div class="content">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
<<<<<<< HEAD
        <el-form-item label="账号:" prop="pass">
          <el-input v-model="ruleForm.account"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码:" prop="checkPass">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
=======
        <el-form-item label="账号:" prop="account">
          <el-input v-model="ruleForm.account" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码:" prop="checkCode">
          <el-input v-model="ruleForm.checkCode" type="text" autocomplete="off" placeholder="请输入图片验证码"/>
          <img class='verificationCode'  :src="condeImgSrc" alt=""  @click="brushImgCode" style="margin-top: 10px;"/>
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
        </el-form-item>

        <el-form-item label="验证码:" prop="checkCode"  >
          <el-input v-model="ruleForm.checkCode"  width="80px"/>
          <img className='verificationCode'  :src="imgSrc" alt="" />
        </el-form-item>
        
        <el-form-item>
<<<<<<< HEAD
          <el-button type="primary" @click="submitForm">登录</el-button>
=======
          <el-button type="primary" @click="submitForm(ruleFormRef)" style="margin: 0 auto;" :loading="loading">登录</el-button>
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
<<<<<<< HEAD
import type { FormInstance, FormRules } from 'element-plus'
import {loginApi} from "../apis/user.js"

const ruleForm = reactive({
  account: '18282533010',
  password: '123456',
  checkCode: "",
})

let imgSrc = ref("http://47.120.14.63:8081/checkCode/getCheckCode/18282533010")

 function getCode() {
  imgSrc.value +=  imgSrc.value + "18282533010"
  }

onMounted(() => {
  
})


const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
=======
import type { FormInstance, FormRules } from 'element-plus';
import {loginApi} from "./../apis/user.js";
import {ElMessage} from 'element-plus';
const condeImgSrc= ref("http://47.120.14.63:8081/checkCode/getCheckCode")
const brushImgCode = () => {
    condeImgSrc.value = 'http://47.120.14.63:8081/checkCode/getCheckCode/?id=' + Math.random()
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
}
const $useRouter=useRouter();
const ruleFormRef = ref<FormInstance>()
const loading=ref(false)


const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入您的账号'))
  } else {
<<<<<<< HEAD
    if (ruleForm.account !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
=======
    // if (ruleForm.account !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('account', () => null)
    // }
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  // if (value === '') {
  //   callback(new Error('请输入您的密码'))
  // } else if (value !== ruleForm.pass) {
  //   // callback(new Error("Two inputs don't match!"))
  // } else {
  //   callback()
  // }
  if (value === '') {
    
    callback(new Error('请输入您的密码'))
<<<<<<< HEAD
  } else if (value !== ruleForm.password) {
    callback(new Error("Two inputs don't match!"))
=======
  } else {
    // if (ruleForm.pass !== '') {
    //   if (!ruleFormRef.value) return
    //   ruleFormRef.value.validateField('pass', () => null)
    // }
    callback()
  }
}
const checkCode = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入您的验证码'))
  } else if (value !== ruleForm.checkCode) {
    // callback(new Error("Two inputs don't match!"))
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
  } else {
    callback()
  }
}

<<<<<<< HEAD
=======
const ruleForm = reactive({
  account: '18282533010',
  password: '123456',
  checkCode: '',
})
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9

const rules = reactive<FormRules>({
  account: [{ validator: validatePass, trigger: 'blur' }],
  password: [{ validator: validatePass2, trigger: 'blur' }],
  checkCode: [{ validator: checkCode, trigger: 'blur' }],
})

<<<<<<< HEAD
const submitForm = async () => {
 
  const {account, password, checkCode} = ruleForm
      let res = await loginApi({account, password, checkCode})
      
=======
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      loading.value=true
      //  console.log(ruleForm);
       loginApi(ruleForm)
       .then((res:any)=>{
        console.log(res);
         if(res.data.code==200){
            loading.value=false;
            // console.log(res.headers.authorization);
            localStorage.setItem("authorization",res.headers.authorization);
            // localStorage.authorization=res.headers.authorization;
            localStorage.setItem("userInfo",JSON.stringify(res.data.data));
            $useRouter.push("/nav");
            ElMessage.success("登录成功")
         }
           
       }).catch(()=>{
           loading.value=false;
           ElMessage.success("登录失败")
       })


    } else {
      console.log('error submit!')
      return false
    }
  })
>>>>>>> 28103c9f7cd4d66a5d85d23a8cdad95e1021b9b9
}
</script>

<style lang='less' scoped>
.el-form {
  width: 260px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}


</style>